import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import '@/styles/index.scss'
import 'normalize.css/normalize.css'
import { createPinia } from 'pinia'
// 状态持久化：是一个用于Pinia（Vue3的状态管理库）的插件，它的主要作用是将 Pinia 中的状态持久化到浏览器的存储中
// (如 localStorage、sessionStorage 或 cookies），以便在页面刷新或重新加载时，状态不会丢失。
// 自动恢复状态：当用户重新打开应用时，插件会从存储中读取之前保存的状态并恢复它，从而提供更好的用户体验。
// 配置灵活：您可以配置哪些 store 或 state 需要持久化，以及选择不同的存储方式（如 localStorage 或 sessionStorage）。
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { i18n } from './locales'
// vue3-click-away允许您在点击组件外部区域时触发指定的事件处理函数。这通常用于实现以下场景：
// 关闭弹出菜单：当用户点击菜单外部区域时自动关闭菜单。
// 隐藏模态框：当用户点击模态框外部区域时关闭模态框。
// 取消编辑模式：当用户点击输入框外部区域时取消编辑模式。
// 简化代码逻辑：使用这个插件可以避免手动编写复杂的事件监听器和逻辑来检测点击位置，从而简化代码并提高可维护性。
import VueClickAway from 'vue3-click-away'
import lazyPlugin from 'vue3-lazy'
import infiniteScroll from 'vue3-infinite-scroll-better'
import v3ImgPreview from 'v3-img-preview'
import { setInterceptors } from '@/service/request'
import { components, plugins } from './plugins/element-plus'
import { installSvgIcon } from '@/icons'


const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)
export const app = createApp(App)
  .use(router)
  .use(pinia)
  .use(i18n)
  .use(VueClickAway)
  .use(infiniteScroll)
  .use(v3ImgPreview, {})
  .use(lazyPlugin, {
    loading: require('@/assets/default-cover.jpg'),
    error: require('@/assets/default-cover.jpg')
  })

// 设置响应拦截器
setInterceptors(app)
components.forEach((component: any) => {
  app.component(component.name, component)
})

// plugins.forEach((plugin: any) => {
//   app.use(plugin)
// })
installSvgIcon(app)
app.mount('#app')
